<template>
    <div class="mine">
    	<div class="head">
    		<div class="header">
		    	<span>我的</span>
		    	<a href="#" class="sign"><img src="../assets/qiandao.png"></a>
		    </div>
		    <div class="portraint">
		    	<img src="../assets/portraint.png" alt="">
		    </div>
		    <p>{{ name }} {{ sex == 'man' ? '小帅锅' : '小阔爱'}}</p>
    	</div>
    	<div class="otherTags">
    			<ul>
    				<li class="line">
    					<span>
    						<i class="fa fa-address-book-o blue"></i>	
    					</span>
    					<span class="text">个人信息</span>
    					<span class="icon2"><i class="fa fa-angle-right"></i></span>
    				</li>
    				<li>
    					<span class="icon1">
    						<i class="fa fa-rmb"></i>
    					</span>
    					<span>发票信息</span>
    					<span class="icon2"><i class="fa fa-angle-right"></i></span>
    				</li>
    				<li>
    					<span class="icon1">
    						<i class="fa fa-credit-card-alt darkblue"></i> 						
    					</span>
    					<span>信用卡</span>
    					<span class="icon2"><i class="fa fa-angle-right"></i></span>
    				</li>
    				<li class="mar-top">
    					<span class="icon1">
    						<i class="fa fa-map-marker"></i>
    					</span>
    					<span>地址管理</span>
    					<span class="icon2"><i class="fa fa-angle-right"></i></span>
    				</li>
    				<li class="mar-top">
    					<span class="icon1">
    						<i class="fa fa-lock"></i>
    					</span>
    					<span>密码修改</span>
    					<span class="icon2"><i class="fa fa-angle-right"></i></span>
    				</li>
    				<li class="mar-top">
    					<span class="icon1">
    						<i class="fa fa-envelope-open"></i>
    					</span>
    					<span>意见反馈</span>
    					<span class="icon2"><i class="fa fa-angle-right"></i></span>
    				</li>
    			</ul>
    		</div>
 </div>
</template>

<script>
import { mapState } from 'vuex'
	export default {
		data () {
			return {
			}
		},
		created () {

		},
		computed: {
			...mapState(['name', 'sex'])
		}

	}
</script>

<style scoped lang="less">
	.mine{
		background: #f4f4f4;
	}
	.head{
		width: 100%;
		height: 3rem;
		background: #fff url(../assets/mine.png) no-repeat center center;
		position: relative;
		padding-bottom: 1rem;
		overflow: hidden;
		.header{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 0.36rem;
			color: #fff;
			i{
				position: absolute;
				left: 20px;
				line-height: 50px;
				font-size: 40px;
				color: #fff;
			}
			.sign{
				position: absolute;
				right: 20px;
				top: 0;
				img{width: 0.6rem;height: 40px;line-height: 40px;padding-top: 5px;}
			} 
		}
		.portraint{
			width: 1.5rem;
			height: 1.5rem;
			background: #fff;
			border-radius: 50%;
			position: absolute;
			left: 50%;
			top: 46%;
			transform: translateX(-50%);
			img{width: 100%;height: 100%;border-radius: 50%;}
		}
		p{
			padding-top: 3.4rem;
			font-size: 0.4rem;
			text-align: center;
		}
	}
	.otherTags{
		margin-top: 0.15rem;
		ul{ 
			background: #f4f4f4;
			padding-bottom: 1.5rem;
			li{ 
				background: #fff;
				padding: 15px 30px;
				font-size: 0.3rem;
				i{font-size: 0.40rem;}
				.icon1{
					float: left;
					width: 8%;
					text-align: center;
					margin: 0 auto; 
					i{color: #ff6100;}
					.blue{color: #87a0e8;}
					.green{color: #60a371;}
					.darkblue{color: #5076b7;}
				}
				.icon2{
					i{float: right;font-size: 0.56rem;}
				}
				span:nth-child(2){
					margin-left: 0.15rem;
				}
			}
			.line{border-bottom: 1px solid #e2e2e2;}
			.mar-top{margin-top: 0.15rem;}
		}
	}
	
</style>